<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex">
      <!-- 右侧内容区 -->
      <div class="flex-1 p-8">
        <!-- 密码修改 -->
        <div class="bg-white rounded-lg shadow-sm p-8">
          <div class="flex gap-8">
            <div class="flex-1">
              <h2 class="text-2xl font-bold mb-6">修改密码</h2>
              <el-form :model="passwordForm" label-width="120px">
                <el-form-item label="当前密码">
                  <el-input
                    v-model="passwordForm.currentPassword"
                    type="password"
                    placeholder="请输入当前密码"
                    show-password
                  />
                </el-form-item>

                <el-form-item label="新密码">
                  <el-input
                    v-model="passwordForm.newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    show-password
                    @input="updatePasswordStrength"
                  />
                  <!-- 密码强度指示 -->
                  <div class="mt-2">
                    <div class="flex items-center gap-2">
                      <div 
                        v-for="n in 3"
                        :key="n"
                        class="h-2 flex-1 rounded-full transition-all"
                        :class="[n <= strength.level ? strength.color : 'bg-gray-200']"
                      ></div>
                    </div>
                    <div class="flex justify-between text-xs mt-2">
                      <span :class="strength.textColor">密码强度：{{ strength.text }}</span>
                      <span :class="strength.textColor">{{ strength.requirements }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="确认新密码">
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    show-password
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    class="!rounded-button whitespace-nowrap"
                    @click="changePassword"
                    >确认修改</el-button
                  >
                </el-form-item>
              </el-form>

              <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                <h3 class="text-blue-600 font-medium mb-2">密码安全提示：</h3>
                <ul class="text-sm text-gray-600 space-y-2">
                  <li>&bull; 密码长度至少8位</li>
                  <li>&bull; 包含大小写字母、数字和特殊字符</li>
                  <li>&bull; 不要使用易猜测的个人信息</li>
                  <li>&bull; 建议定期更换密码</li>
                </ul>
              </div>
            </div>

            <div class="w-[400px]">
              <img
                src="https://ai-public.mastergo.com/ai/img_res/017ae77d85fb5c759c3770f799960af0.jpg"
                alt="security"
                class="w-full object-cover rounded-lg"
              />
              <div class="mt-4 text-center">
                <div class="text-lg font-medium text-blue-600">安全小卫士</div>
                <div class="text-sm text-gray-500">24小时守护您的账号安全</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { resetPassword } from "../../../api/user";

const passwordForm = ref({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

// 密码强度计算
const strength = computed(() => {
  const password = passwordForm.value.newPassword;
  const levels = [
    { 
      level: 0,
      text: '弱', 
      color: 'bg-red-500',
      textColor: 'text-red-500',
      requirements: '至少需要8位字符'
    },
    { 
      level: 1,
      text: '中', 
      color: 'bg-orange-400',
      textColor: 'text-orange-400',
      requirements: '建议混合使用字符类型'
    },
    { 
      level: 2,
      text: '强', 
      color: 'bg-green-500',
      textColor: 'text-green-500',
      requirements: '优秀的密码强度'
    }
  ];

  if (!password) return { 
    level: 0,
    text: '无',
    color: 'bg-gray-200',
    textColor: 'text-gray-400',
    requirements: '请输入密码'
  };

  const hasLower = /[a-z]/.test(password);
  const hasUpper = /[A-Z]/.test(password);
  const hasDigit = /\d/.test(password);
  const hasSpecial = /[\W_]/.test(password);
  const typeCount = [hasLower, hasUpper, hasDigit, hasSpecial].filter(Boolean).length;

  let score = 0;
  // 长度评分
  if (password.length >= 8) score += 1;
  if (password.length >= 16) score += 1;
  // 复杂度评分
  score += typeCount;

  if (password.length < 8) return levels[0];
  if (score <= 3) return levels[0];
  if (score <= 5) return levels[1];
  return levels[2];
});

const updatePasswordStrength = () => {
  // 可以添加额外的逻辑（如强制复杂密码时阻止提交）
};

const changePassword = () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error("两次输入的新密码不一致");
    return;
  }

  // 密码强度验证
  if (strength.value.level < 1) {
    ElMessage.warning("密码强度不足，请使用更复杂的密码");
    return;
  }

  resetPassword(
    passwordForm.value.currentPassword,
    passwordForm.value.newPassword
  ).then(() => {
    ElMessage.success("密码修改成功");
    passwordForm.value = {
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  });
};
</script>

<style scoped>
/* 自定义过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>